<template>
  <div style="background: #fff; padding: 10px; display: flex; justify-content: space-between">
    <div>
      <el-button type="primary" plain size="small" @click="insert"
        ><el-icon><Plus /></el-icon>新增</el-button
      >
      <el-button
        type="danger"
        plain
        size="small"
        @click="remove(null, 1)"
        :disabled="!selectId.length > 0"
        ><el-icon><Delete /></el-icon>删除</el-button
      >
      <el-button
        type="warning"
        plain
        size="small"
        @click="close(null, 1)"
        :disabled="!selectId.length > 0"
        ><el-icon><MuteNotification /></el-icon>关闭</el-button
      >
    </div>
    <div style="margin-right: 20px">
      <el-button style="width: 30px; height: 30px; border-radius: 50%" @click="refresh">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </div>
  </div>

  <div style="padding: 10px; background: #fff">
    <el-table
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0' }"
      size="small"
      :data="props.notices"
      @selection-change="handlerSelect"
      stripe
      height="350"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="admin" label="创建者" width="80" />

      <el-table-column label="公告内容" align="center" show-overflow-tooltip width="250">
        <template #default="scope">
          <div v-html="output(scope.row.content)"></div>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.title === '通知' ? 'warning' : 'success'" plain>{{
            scope.row.title
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'primary' : 'danger'" plain>
            {{ scope.row.status === 0 ? '正常' : '关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          <div>{{ titleUtil.formatDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="remove(scope.row.id, 0)"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
          <el-button type="text" @click="close(scope.row.id, 0)"
            ><el-icon><MuteNotification /></el-icon>关闭</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <RemoveDia ref="removeDia" @notice-remove="refresh" :type="oprType"></RemoveDia>
  <AddNotice ref="addNotice"></AddNotice>
</template>

<script setup>
import { marked } from 'marked'
import titleUtil from '@/util/titleUtil'
import AddNotice from '@/components/notice/AddNotice.vue'
import { ref } from 'vue'
import RemoveDia from '@/components/notice/RemoveDia.vue'
import { ElNotification } from 'element-plus'

const props = defineProps({
  notices: {
    type: Array,
    default: null
  }
})

const oprType = ref({
  type: null,
  tips: ''
})

const addNotice = ref()
const selectId = ref([])
const removeDia = ref()

const output = (text) => {
  return marked.parse(text)
}

const emits = defineEmits(['data-single', 'data-batch', 'data-refresh'])
const insert = () => {
  addNotice.value.open()
}
const remove = (id, type) => {
  let arr = []
  if (type === 0) {
    arr.push(id)
  } else {
    arr = selectId.value
  }

  if (arr.length <= 0) {
    ElNotification.warning('抱歉，你没有选中数据')
    return
  }
  oprType.value.tips = '确定要删除这些数据吗？'
  oprType.value.type = 0
  removeDia.value.open(arr)
}

const close = (id, type) => {
  let arr = []
  if (type === 0) {
    arr.push(id)
  } else {
    arr = selectId.value
  }

  if (arr.length <= 0) {
    ElNotification.warning('抱歉，你没有选中数据')
    return
  }
  oprType.value.tips = '确定要关闭这些数据吗？'
  oprType.value.type = 1
  removeDia.value.open(arr)
}

const handlerSelect = (val) => {
  console.log('选中了', val)
  selectId.value = val.map((item) => item.id)
  console.log('最终id', selectId.value)
}

const refresh = () => {
  emits('data-refresh')
}
</script>

<style scoped>

.el-button{
  border: none;
  background: none;
}
</style>
